import { Input, Form, Button, Table } from 'antd';
import { getUserList } from '@/services/api/user/user';
import { columns } from './tableConfig';
interface FormDataProps {
  username: string;
  nickName: string;
}
export default function User() {
  const [tableData, setTableData] = useState([]);
  const [page, setPage] = useState({ pageNo: 1, pageSize: 10, total: 0 });
  const [formData, setFormData] = useState<FormDataProps>();
  const pages = {
    pageSize: page.pageSize,
    total: page.total,
    onChange(pages: any, pageSize: any) {
      setPage(() => {
        return { ...page, pageNo: pages, pageSize };
      });
    },
  };
  useEffect(() => {
    query();
  }, [page.pageNo, formData]);
  const query = async () => {
    const params = { ...page, ...formData };
    const res = await getUserList(params);
    if (res.code === 200) {
      setTableData(res.data.users);
      setPage({ ...page, total: res.data.totalCount });
    }
  };
  const onFinish = (values: any) => {
    // console.log(values);
    setFormData({ ...values });
    // query();
  };
  return (
    <div>
      <div className=" p-4">
        <Form
          onFinish={onFinish}
          colon={false}
          autoComplete="off"
          style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}
        >
          <Form.Item label="用户名" name="username">
            <Input></Input>
          </Form.Item>
          <Form.Item label="昵称" name="nickName">
            <Input></Input>
          </Form.Item>
          <Form.Item>
            <Button className="w-full" type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div style={{ height: '100%' }}>
        <Table
          rowKey={'id'}
          pagination={pages}
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 600 }}
        />
      </div>
    </div>
  );
}
